<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05-js作业-螺旋</title>
    <style>
        html{font-family: "Microsoft YaHei";}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        p,ul{margin: 0;padding: 0;}
        .wrap{
            position: relative;
            margin: 50px auto;
            width: 800px;
        }
        .s-btn{
            font-size: 0;
        }
        .s-btn span{
            display: inline-block;
            margin-right: 5px;
            width: 75px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        .bgc-0{
            background-color: #000;
        }
        .bgc-fe6{
            background-color: #fe6600;
        }
        .banner{
            position: relative;
        }
        .banner,.banner .pic{
            width: 800px;
            height: 450px;
        }
        .banner .pic li{
            display: none;
        }
        .banner .pic .show{
            display: block;
        }
        .banner .pic img{
            width: 800px;
            height: 450px;
            vertical-align: top;
        }
        .banner p{
            position: absolute;
            background-color: rgba(0,0,0,.6);
            font-size: 12px;
            line-height: 30px;
            color: #fff;
            text-align: center;
        }
        .banner p:nth-child(1),.banner p:nth-child(2){
            width: 100%;
            height: 30px;
        }
        .banner p:nth-child(1){
            top: 0;
        }
        .banner p:nth-child(2){
            bottom: 0;
        }
        .banner p:nth-child(3),.banner p:nth-child(4){
            top: 0;
            bottom: 0;
            margin: auto 0;
            width: 60px;
            height: 30px;
            cursor: pointer;
        }
        .banner p:nth-child(3){
            left: 0;
        }
        .banner p:nth-child(4){
            right: 0;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <header class="s-btn">
            <span class="bgc-fe6">循环切换</span>
            <span class="bgc-0">单边切换</span>
        </header>
        <section class="banner">
            <p>1/6</p>
            <p>《合金装备5：幻痛》</p>
            <p>上一张</p>
            <p>下一张</p>
            <ul class="pic">
                <li class="show"><img src="images/1.jpg" alt="轮播图"></li>
                <li><img src="images/2.jpg" alt="轮播图"></li>
                <li><img src="images/3.jpg" alt="轮播图"></li>
                <li><img src="images/4.jpg" alt="轮播图"></li>
                <li><img src="images/5.jpg" alt="轮播图"></li>
                <li><img src="images/6.jpg" alt="轮播图"></li>
            </ul>
        </section>
    </section>
</body>
<script>
    var btn1 = document.getElementsByTagName('span')[0],
        btn2 = document.getElementsByTagName('span')[1],
        ban = document.getElementsByClassName('banner')[0],
        tTxt = ban.getElementsByTagName('p')[0],
        bTxt = ban.getElementsByTagName('p')[1],
        btnL = ban.getElementsByTagName('p')[2],
        btnR = ban.getElementsByTagName('p')[3],
        bPic = document.getElementsByClassName('pic')[0].getElementsByTagName('li'),
        aTxt = ['《合金装备5：幻痛》','《全境封锁》','《光环：致远星》','《暗黑破坏神3》','《魔兽争霸3：冰封王座》','《怪物猎人：世界》'],
        bool = true,
        num = 1;
    btn1.onclick = function(){
            btn1.className = "bgc-fe6";
            btn2.className = "bgc-0";
            bool = true;
    };
    btn2.onclick = function(){
            btn2.className = "bgc-fe6";
            btn1.className = "bgc-0";
            bool = false;
    };
    btnR.onclick = function(){
        if(num < 6){
            bPic[num].className = "show";
            bPic[num-1].className = "";
            tTxt.innerText = (num + 1) + "/6";
            bTxt.innerText = aTxt[num];
            num = num + 1;
        }else if(bool){
            num = 1;
            bPic[0].className = "show";
            bPic[5].className = "";
            tTxt.innerText = "1/6";
            bTxt.innerText = aTxt[0];
        }else{
            alert('已经是最后一张');
        };
    };
    btnL.onclick = function(){
        if(num > 1){
            num = num - 1;
            bPic[num-1].className = "show";
            bPic[num].className = "";
            tTxt.innerText = (num) + "/6";
            bTxt.innerText = aTxt[num-1];
        }else if(bool){
            num = 6;
            bPic[5].className = "show";
            bPic[0].className = "";
            tTxt.innerText = "6/6";
            bTxt.innerText = aTxt[5];
        }else{
            alert('已经是第一张');
        };
    };
</script>
</html>